<div class="modal-header primary">
    <h5 class="modal-title" id="modal-title">
        Alert triggers
        <a  class="modal-close pull-right" ng-click="close()">
            <i class="mdi mdi-close"></i>
        </a>

    </h5>
</div>

<div class="modal-body">

    <div class="row actions">
        <div class="col-md-12">
            <list-search
                    class="pull-right"
                    data-filters="filters"
                    data-options="itemsPerPageOptions"
                    data-items="itemsPerPage"
            ></list-search>
        </div>
    </div>

    <konga-loader ng-if="loading && !items.length"></konga-loader>
    <div class="row" ng-if="!loading || items.length">
        <div class="col-md-12">
            <div class="table-responsive">
                <table class="table table-hover table-striped">
                    <tr>
                        <th width="{{item.width}}" class="text-nowrap"
                            data-ng-repeat="item in titleItems | filter:titleFilter"
                        >
                            <a
                                    class="clickable"
                                    data-ng-show="item.column"
                                    data-ng-click="changeSort(item)"
                                    data-ng-bind-html="item.title.toUpperCase()"
                            ></a>
                            <span
                                    data-ng-show="!item.column"
                                    data-ng-bind-html="item.title.toUpperCase()"
                            ></span>
                            <input data-ng-if="item.checkbox" type="checkbox" data-ng-model="globalCheck.isAllChecked"/>
                            <i class="mdi"
                               data-ng-show="sort.column == item.column"
                               data-ng-class="{'mdi-chevron-down': !sort.direction, 'mdi-chevron-up': sort.direction}"
                            >
                            </i>
                        </th>
                        <th width="1" ng-if="user.hasPermission('upstreams','delete')"></th>
                    </tr>
                    <tr dir-paginate="item in items | orderBy:sort.column:sort.direction | filter : filters.searchWord | itemsPerPage: itemsPerPage">
                        <td>
                            <i class="mdi mdi-circle text-success"
                               ng-class="{'clickable': user.hasPermission('upstreams','update')}"
                               ng-show="item.active"
                               uib-tooltip="Active"></i>
                            <i class="mdi mdi-circle text-muted"
                               ng-class="{'clickable': user.hasPermission('upstreams','update')}"
                               ng-show="!item.active"
                               uib-tooltip="Inactive"></i>
                        </td>
                        <td>
                            <a ui-sref="upstreams.edit({id:item.upstream_id})"
                               ng-if="item.upstream"
                               target="_blank">
                                {{ item.upstream.name || 'N/A' }}
                            </a>
                            <span class="text-danger" ng-if="!item.upstream">
                                {{ item.upstream_id }}<br>
                                <small>This upstream no longer exists.</small>
                            </span>
                        </td>
                        <td>{{item.connection.name || "-"}}</td>
                        <td>{{moment(item.created_at).format("MMM DD YYYY @HH:mm")}}</td>
                        <td ng-if="user.hasPermission('upstreams','delete')">
                            <button type="button" ng-click="deleteItem($index,item)" class="btn btn-danger btn-link">
                                <i class="mdi mdi-delete"></i>
                                Delete
                            </button>
                        </td>
                    </tr>

                    <tr data-ng-if="items.length === 0 && !loading">
                        <td colspan="100%" class="text-center text-muted">
                            <em>No data found...</em>
                        </td>
                    </tr>
                    <tr data-ng-if="loading">
                        <td colspan="100%" class="text-center text-muted">
                            <em>Loading items...</em>
                        </td>
                    </tr>
                </table>
            </div>

        </div>
        <dir-pagination-controls class="pull-right"></dir-pagination-controls>
    </div>

</div>